<template>
	<view>
		<view @tap.stop="maskHide" class="fadeIn_mask" :class="showBl?'show':'hide'"></view>
		<view :class="[('QS_' + type), showBl?'show':'hide']">
			<view class="com-wrap">
				<view class="f-16 text-center m-b-10 ">
					选择时间
				</view>
				<view class="flex">
					<view class="flex-1 flex">
						<view class="time-item flex flex-direction align-center" :class="{'time-item-act':index==timeAct}" v-for="(item,index) in timeList" :key="index" @click="changeTimeAct(item,index)">
							<view class="">
								{{item.week}}
							</view>
							<view class="">
								{{item.month}}-{{item.day}}
							</view>
						</view>
					</view>
					<view class="time-item-s flex flex-direction align-center" :class="{'time-item-act':timeAct==4}" @click="changeTimeMore(4)">
						<view class="p-t-2">
							<image src="/static/img/calender.png" class="calenders"></image>
						</view>
						<view class="">
							{{moreDate?moreDate:'更多'}}
						</view>
					</view>
				</view>
				<view class="flex align-center position-rel">
					<view class="pick-bg"></view>
					<picker-view :indicator-class='"pick-act"' :value="value1" @change="bindChange($event,1)" class="picker-view flex-1" v-if="resType!=3">
						<picker-view-column>
							<view class="item" v-for="(item,index) in hourArr" :key="index" :class=" index == value1[0] ? 'picker-select' : ''">
								{{item}}时
							</view>
						</picker-view-column>
					</picker-view>
						<view class="item flex-none fontBold" v-if="resType!=3">
							
						</view>
					<picker-view :indicator-class='"pick-act"' :value="value2" @change="bindChange($event,2)" class="picker-view flex-1" v-if="resType!=3">
						<picker-view-column>
							<view class="item" v-for="(item,index) in minArr" :key="index" :class=" index == value2[0] ? 'picker-select' : ''">
								{{item}}分
							</view>
						</picker-view-column>
					</picker-view>
					<view class="fontBold f-15 text-center item" style="width: 20%;" v-if="resType!=3">
						
					</view>
					<picker-view :indicator-class='"pick-act"' :value="value3" @change="bindChange($event,3)" class="picker-view flex-1">
						<picker-view-column>
							<view class="item" v-for="(item,index) in hourArr" :key="index" :class=" index == value3[0] ? 'picker-select' : ''">
								{{item}}时
							</view>
						</picker-view-column>
					</picker-view>
						<view class="item flex-none fontBold" >
							
						</view>
					<picker-view :indicator-class='"pick-act"' :value="value4" @change="bindChange($event,4)" class="picker-view flex-1">
						<picker-view-column>
							<view class="item" v-for="(item,index) in minArr" :key="index" :class=" index == value4[0] ? 'picker-select' : ''">
								{{item}}分
							</view>
						</picker-view-column>
					</picker-view>
						<!-- <view class="item flex-none fontBold" v-if="resType==3">
							
						</view>
					<picker-view :indicator-class='"pick-act"' :value="value6" @change="bindChange($event,6)" class="picker-view flex-1" v-if="resType==3">
						<picker-view-column>
							<view class="item" v-for="(item,index) in secArr" :key="index" :class=" index == value6[0] ? 'picker-select' : ''">
								{{item}}秒
							</view>
						</picker-view-column>
					</picker-view> -->
				</view>
				
				<view class="flex f-15 justify-space-around m-t-10">
					<view class="sub-btn sub-btn1" @tap="hide">
						取消
					</view>
					<view class="sub-btn sub-btn2" @tap="sub">
						确定
					</view>
				</view>
				<view>
					<uni-calendar 
					ref="calendar"
					:insert="false"
					@confirm="confirm"
					 />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				showBl: false,
				hourArr:[],
				minArr:[],
				secArr:[],
				value1: [9],
				value2: [0],
				
				value3: [18],
				value4: [0],
				value6: [0],
				timeList:[],
				timeAct:0,
				timeData:{
					date:''
				},
				moreDate:''
			}
		},
		onLoad(option) {
			
		},
		props:{
			type:{
				type: String,
				default: 'fadeInMiddle'
			},
			startTime:{
				type: String,
				default: '09:00'
			},
			endTime:{
				type: String,
				default: '18:00'
			},
			singleTime:{
				type: String,
				default: '09:00'
			},
			tapMaskHide: {
				type: Boolean,
				default: true
			},
			resType:{
				type: [String,Number],
				default: '2'
			}
		},
		
		mounted() {
			
		},
		created() {
			setTimeout(()=>{
				this.init();
			},150)
			
		},
		computed:{
			nowDay(){
				let date = new Date();
				let Y = date.getFullYear() ;
				let M = (date.getMonth() + 1).toString().padStart(2, '0');
				let D = date.getDate().toString().padStart(2, '0');
				return Y + '-' + M  + '-' + D
			}
		},
		methods: {
			show() {
				this.showBl = true;
			},
			maskHide() {
				if(this.tapMaskHide) this.hide();
			},
			hide() {
				this.showBl = false;
			},
			formatNumber (n){
				n = n.toString();
				return n[1] ? n : '0' + n;
			},
			init(){
				let nowDayTime = new Date(this.nowDay).getTime();
				let weekArr = ['日','一','二','三','四','五','六'];
				let arr = [];
				let timeArr = ['今天','明天','后天'];
				for(let i = 0;i<4;i++){
					let days = i * 86400000;
					let daysTo = nowDayTime + days;
					let date = new Date(daysTo);
					let year = date.getFullYear() ;
					let month = (date.getMonth() + 1).toString().padStart(2, '0');
					let day = date.getDate().toString().padStart(2, '0');
					let weekNum = date.getDay();
					let weekStr = weekArr[weekNum];
					let week = i==3?'周'+weekStr:timeArr[i];
					arr.push({
						year,
						month,
						day,
						week
					})
				}
				console.log(arr)
				this.timeData.date = this.nowDay;
				this.timeList = arr;
				for(let i = 0;i<24;i++){
					let iNum = this.formatNumber(i);
					this.hourArr.push(iNum);
				}
				for(let j = 0;j<60;j++){
					let jNum = this.formatNumber(j);
					this.minArr.push(jNum);
				}
				for(let k = 0;k<60;k++){
					let kNum = this.formatNumber(k);
					this.secArr.push(kNum);
				}
				if(this.resType==3){
					if(this.singleTime){
						this.value3 = [parseFloat(this.singleTime.split(':')[0])];
						this.value4 = [parseFloat(this.singleTime.split(':')[1])];
						// this.value6 = [parseFloat(this.singleTime.split(':')[2])];
					}
				}else{
					if(this.startTime){
						this.value1 = [parseFloat(this.startTime.split(':')[0])];
						this.value2 = [parseFloat(this.startTime.split(':')[1])];
					}
					if(this.endTime){
						this.value3 = [parseFloat(this.endTime.split(':')[0])];
						this.value4 = [parseFloat(this.endTime.split(':')[1])];
					}
				}
			},
			bindChange(e,type){
				let val = e.detail.value;
				switch (type){
					case 1:this.value1 = val;break;
					case 2:this.value2 = val;break;
					case 3:this.value3 = val;break;
					case 4:this.value4 = val;break;
					
					case 6:this.value6 = val;break;
				}
			},
			singleSub(){
				let value3 = this.value3[0];//时
				let value4 = this.value4[0];//分
				// let value6 = this.value6[0];//秒
				// let times = `${this.hourArr[value3]}:${this.minArr[value4]}:${this.secArr[value6]}`
				let times = `${this.hourArr[value3]}:${this.minArr[value4]}`
				let obj = {
					sTime:`${this.timeData.date} ${this.hourArr[value3]}:${this.minArr[value4]}`,
					showTime:`${this.timeData.date.slice(5)} ${times}`
				}
				this.$emit('changeTimeFrame',obj);
				this.hide();
			},
			sub(){
				if(this.resType == 3){
					this.singleSub();
					return;
				}
				if(this.timeData.date == ''){
					uni.showToast({
						title:'请选择日期',
						icon:'none'
					})
					return;
				}
				let value1 = this.value1[0];//时
				let value2 = this.value2[0];//分
				let value3 = this.value3[0];//时
				let value4 = this.value4[0];//分
				if(value1 > value3 ||(value1 == value3&&value2 > value4)){
					uni.showToast({
						title:'开始时间不能大于结束时间',
						icon:'none'
					})
					return;
				}
				if(value1 == value3&&value2 == value4){
					uni.showToast({
						title:'开始时间不能等于结束时间',
						icon:'none'
					})
					return;
				}
				
				let start_time = `2023/11/03 ${this.hourArr[value1]}:${this.minArr[value2]}`;
				let end_time = `2023/11/03 ${this.hourArr[value3]}:${this.minArr[value4]}`;
				if(value1 > value3||(value1==value3&&value2>value4)){
					end_time = `2023/11/04 ${this.hourArr[value3]}:${this.minArr[value4]}`;
				}
				let s = (this.$util.timeToTimestamp(end_time) - this.$util.timeToTimestamp(start_time))/1000;
				let times = (s/3600).toFixed(2);
				if(this.resType == 1){
					this.$emit('changeTimeFrame',times);
					this.hide();
				}else if(this.resType == 2){
					let obj = {
						sTime:`${this.timeData.date} ${this.hourArr[value1]}:${this.minArr[value2]}`,
						eTime:`${this.timeData.date} ${this.hourArr[value3]}:${this.minArr[value4]}`,
						showTime:`${this.timeData.date.slice(5)} ${this.hourArr[value1]}:${this.minArr[value2]}-${this.hourArr[value3]}:${this.minArr[value4]}`
						// hours:times
					}
					this.$emit('changeTimeFrame',obj);
					this.hide();
				}
			},
			changeTimeAct(item,index){
				this.timeData.date = item.year + '-' + item.month  + '-' + item.day;
				this.timeAct = index;
				this.moreDate = '';
			},
			changeTimeMore(type){
				this.timeData.date = '';
				this.timeAct = type;
				this.$refs.calendar.open();
			},
			confirm(e){
				console.log(e)
				let fulldate = e.fulldate;
				this.timeData.date = fulldate;
				this.moreDate = fulldate.slice(5);
			},
		}
	}
</script>

<style lang="less">
	.QS_fadeInMiddle {
		position: fixed;
		z-index: 600;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		opacity: 0;
		transition: all .3s;
	}
	.QS_fadeInMiddle.show{
		transform: translate(-50%, -50%);
		opacity: 1;
		pointer-events: auto;
		transition-delay: .2s;
	}
	.QS_fadeInMiddle.hide{
		transition-delay: 0s;
	}
	.fadeIn_mask{
		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: 599;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
		transition-delay: .2s;
	}
	.fadeIn_mask.show{
		opacity: 1;
		pointer-events: auto;
		transition-delay: 0s;
	}
	.fadeIn_mask.hide{
		transition-delay: .2s;
	}
	.com-wrap{
		background: #fff;
		padding: 30upx;
		border-radius: 20upx;
		width: 680upx;
	}
	.picker-view {
		width: 100%;
		height: 560upx;
	}
	.pick-bg{
		width: 100%;
		height: 80upx;
		background: #F1F1F1;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
		left: 0;
		border-radius: 10upx;
	}
	.pick-act {
		height: 80upx;
		
	}
	.pick-act::after,.pick-act::before{
		content: none;
	}
	.item {
		line-height: 80upx;
		text-align: center;
	}
	.picker-select{
		font-size: 30upx;
		// font-weight: bold;
		color: #333;
	}
	.week-item{
		border-radius: 50%;
		width: 60upx;
		height: 60upx;
		background: #dbdbdb;
	}
	.week-item-act{
		background: #529eff;
		color: #fff;
	}
	.month-item-box{
		width: 14.28%;
		padding: 8upx 0;
		display: flex;
		justify-content: center;
	}
	.month-item{
		border-radius: 50%;
		width: 50upx;
		height: 50upx;
		background: #dbdbdb;
	}
	.month-item-act{
		background: #529eff;
		color: #fff;
	}
	.sub-btn{
		width: 170upx;
		height: 70upx;
		border-radius: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sub-btn1{
		background: #F7F7F7;
		border: 1px solid #DEDEDE;
	}
	.sub-btn2{
		color: #ffffff;
		background: #4072F4;
		border: 1px solid #DEDEDE;
	}
	.time-item{
		width: 25%;
		color: #999999;
	}
	.time-item-s{
		width: 18%;
		color: #999999;
	}
	.time-item-act{
		color: #4072F4;
	}
	.calenders{
		width: 30rpx;
		height: 30rpx;
	}
</style>
